<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
    <link rel="icon" href="https://www.womai.com/favicon.ico" />
    <link rel="stylesheet" href="../css/list.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <!-- 顶部用户信息 -->
    <div class="user-warp">
      <div class="user">
        <!-- 左边 -->
        <div class="user-left">
          <ul>
            <li>当前城市：</li>
            <li>北京</li>
            <li>hi，欢迎来我买网！</li>
            <a href="./login.html">
              <li>登录</li>
            </a>
            <a href="./reg.html">
              <li>注册</li>
            </a>
          </ul>
        </div>
        <!-- 右边 -->
        <div class="user-right">
          <span class="txt">我的账户</span>
          <ul>
            <li>购物车<span>0</span>件</li>
            <li class="kf">客户服务</li>
            <li>企业购</li>
          </ul>
          <img src="" alt="" />
        </div>
        <div class="k1">
          <p>帮助中心</p>
          <p>新手上路</p>
        </div>
      </div>
    </div>
    <!-- 头部 第一部分 -->
    <div class="headbox">
      <!-- 上部 -->
      <div class="top">
        <div class="top-left">
          <img
            src="https://pic3.womai.com/upload/backend/2020/08/13/15/1597302484754.png"
            alt=""
          />
        </div>
        <div class="top-center">
          <div class="ipt">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            <button>搜索</button>
            <input type="text" class="sousuo" />
          </div>
          <div class="list">
            <span>礼盒</span>
            <span>粮油</span>
            <span>大米</span>
            <span>牛奶</span>
          </div>
          <!-- 搜索下拉框 -->
          <div class="sousuo-ul"></div>
        </div>
        <div class="top-right">
          <img
            src="https://pic2.womai.com/upload/backend/2017/04/25/14/1493100962866.jpg"
            alt=""
          />
        </div>
      </div>
      <!-- 下部 -->
      <div class="bottom">
        <div class="bottom-left">
          <div class="all" style="background: #2d8800">全部商品分类</div>
          <span>团购</span>
        </div>
        <div class="bottom-right">
          <span
            class="glyphicon glyphicon-shopping-cart"
            aria-hidden="true"
          ></span>
          <span class="gw">购物车</span>
        </div>
      </div>
    </div>
    <!-- 横线 -->
    <div class="warp" style="height: 2px; background: #2d8800">
      <div
        style="width: 1210px; height: 2px; background: #2d8800; margin: 0 auto"
      ></div>
    </div>
    <!-- 全部商品 -->
    <div class="swirp-left">
      <ul>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic1.womai.com/upload/backend/2020/07/27/17/1595842621149.png)
                no-repeat 0px;
            "
          ></div>
          <span>肉禽水产</span>
          <span>水果蔬菜</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic1.womai.com/upload/backend/2020/07/27/17/1595842631757.png)
                no-repeat 0px;
            "
          ></div>
          <span>进口食品</span>
          <span>进口直采</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic2.womai.com/upload/backend/2020/07/27/17/1595842647301.png)
                no-repeat 0px;
            "
          ></div>
          <span>酒</span>
          <span>饮料/冲调</span>
          <span>茶</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic1.womai.com/upload/backend/2020/07/27/17/1595842658793.png)
                no-repeat 0px;
            "
          ></div>
          <span>休闲食品</span>
          <span>地方特产</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic2.womai.com/upload/backend/2020/07/27/17/1595842687279.png)
                no-repeat 0px;
            "
          ></div>
          <span>营养健康</span>
          <span>奶制品</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic1.womai.com/upload/backend/2020/07/27/17/1595842695228.png)
                no-repeat 0px;
            "
          ></div>
          <span>粮油副食</span>
          <span>调味干货</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic2.womai.com/upload/backend/2020/07/27/17/1595842704805.png)
                no-repeat 0px;
            "
          ></div>
          <span>母婴食品</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic2.womai.com/upload/backend/2020/07/27/17/1595842713256.png)
                no-repeat 0px;
            "
          ></div>
          <span>礼卡礼券</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic2.womai.com/upload/backend/2020/07/27/17/1595842722535.png)
                no-repeat 0px;
            "
          ></div>
          <span>中粮制造</span>
        </li>
        <li>
          <div
            class="bg-img"
            style="
              background: url(https://pic3.womai.com/upload/backend/2020/07/27/17/1595842733633.png)
                no-repeat 0px;
            "
          ></div>
          <span>我买品牌</span>
        </li>
      </ul>
    </div>

    <!-- 图片 -->
    <div class="list-img">
      <a href=" https://www.womai.com/sale/2021/zzcyj2021/ "
        ><img
          src="https://www.womai.com/upload/backend/2021/03/30/16/1617092310748.jpg"
          alt=""
      /></a>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav-warp">
      <div class="bottom-nav">
        <div class="left">
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
          <li>
            <p>新手上路</p>
            <span>新用户演示</span>
            <span>会员积分计划</span>
            <span>会员等级规则</span>
            <span>售后服务政策</span>
            <span>我买网发票制度</span>
          </li>
        </div>
        <!-- 右1 -->
        <div class="right-1">
          <p>中粮我买网APP</p>
          <img
            src="https://pic2.womai.com/upload/backend/2016/04/19/10/1461033750780.jpg"
            alt=""
          />
        </div>
        <div class="right-2">
          <p>中粮我买网微信</p>
          <img
            src="https://pic2.womai.com/upload/backend/2016/04/13/15/1460533777294.jpg"
            alt=""
          />
        </div>
      </div>
    </div>

    <!-- 底部内容 -->
    <div class="bottom-text">
      <img src="../img/xiangmu_03.jpg" alt="" />
    </div>

    <!-- 右侧导航 -->
    <div class="right-nav">
      <div class="top">
        <span
          class="glyphicon glyphicon-shopping-cart"
          aria-hidden="true"
        ></span>
        <section>购物车</section>
        <span class="num">0</span>
      </div>

      <div class="bottom">
        <!-- 收藏 -->
        <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
        <!-- 钱 -->
        <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
        <!-- 充值 -->
        <span class="glyphicon glyphicon-usd" aria-hidden="true"></span>
        <!-- 二维码 -->
        <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
        <!-- 回到顶部 -->
        <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
      </div>
    </div>

    <!-- js -->
    <link rel="stylesheet" href="../css/list.css" />
    <script src="../js/list.js"></script>
  </body>
</html>
